<template>
  <el-dialog
    :title="view === 'detail'? '机构详情': ''"
    :visible="true"
    width="50%"
    custom-class="editDetail"
    :before-close="closeDialog"
    >
    <vue-body>
    	<el-form :model="tableData" label-width="80px">
      	<el-form-item label="姓名" prop="name">
          <el-input v-model.trim="tableData.name" readonly="readonly" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="phone">
          <el-input v-model.trim="tableData.phone" readonly="readonly" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="工号" prop="staffNo">
          <el-input v-model.trim="tableData.staffNo" readonly="readonly" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="证件类型" prop="idType">
          <div class="typeBox">
              {{this.tableData.idType | idType }}
          </div>
        </el-form-item>
        <el-form-item label="身份证" prop="idNo">
          <el-input v-model.trim="tableData.idNo" readonly="readonly" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <div class="typeBox">
              {{this.tableData.sex | sex }}
          </div>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model.trim="tableData.email" readonly="readonly" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="staffStatus">
          <div class="typeBox">
              {{this.tableData.staffStatus | staffStatus }}
          </div>
        </el-form-item>
        <el-form-item label="员工等级" prop="staffLevel">
          <div class="typeBox">
              {{this.tableData.staffLevel | staffLevel }}
          </div>
        </el-form-item>
    	</el-form>
    </vue-body>
    <div slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="info" @click="submit('ruleForm')">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { RequestError } from "@/services/errors";
import { mapActions } from "vuex";
export default {
  name: "edit-role",
  data () {
    return {
      loading: false,
      orderNo:"",
      formData: {
      },
      dialogFormVisible: false,
      tableData: {},
      id:""
    }
  },
  props: {
    view: {
      type: String,
      default: "detail"
    }
  },
  methods: {
    ...mapActions(["setUserInfo"]),
    closeDialog() {
      this.$emit("close");
    },
    submit() {
    	this.$emit("close");
    },
    imgSrc(data){
      	return this.$store.state.imgUrl + data;
    },
    styleStr(data){
      return "width: 20px;height: 20px;border: 1px solid #aaa;margin-left:10px;margin-top:8px; border-radius: 5px;background: #"+data+";"
    },
  },
  mounted() {
  	
  },
  filters: {
      idType (value) {
        return {"01": '身份证'}[value]
      },
      sex(value){
        return {"0": '女', "1": '男'}[value]
      },
      staffStatus (value) {
        return {"01": '身份证',"02": '离职',"01": '其他'}[value]
      },
      staffLevel (value) {
        return {"01": '普通员工'}[value]
      },
  },
};
</script>
<style>
.el-select {
  width: 100%;
}
.orderDetailWrapper{
  width: 50%;
}
.typeBox{
	background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #bfcbd9;
    box-sizing: border-box;
    color: #1f2d3d;
    font-size: inherit;
    height: 36px;
    line-height: 30px;
    outline: 0;
    padding: 3px 10px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
}
.logoImg{
	height: 120px;
	border-radius: 4px;
	border: 1px solid #bfcbd9;
	padding: 5px;
}
.el-textarea__inner{
	height: 100px;
	resize:none;
}
</style>
